<template>
<!-- 财务管理 begin -->
<div class="main" id="main_finance_manager">
	<div class="main-hd">
		<h2>风控拦截</h2>
	</div>
	<div class="main-bd">
		<div class="content-wrap" id="VuePayment_content">
			<Tabs @on-click="banben">
				<TabPane label="贷前拦截统计"></TabPane>
				<TabPane label="贷中拦截统计"></TabPane>
			</Tabs>

			<!-- 商户列表 begin -->
			<DatePicker type="daterange" format="yyyy-MM-dd" :options="disDate" @on-change="timeChange" placeholder="Select date" style="width: 200px"></DatePicker>
			<Select class="search-col" placeholder="请选择渠道" v-model="platformId" style="width:200px" filterable>
				<Option
					v-for="(item, index) in channelList"
					:value="item.id"
					:key="index"
				>{{ item.platformName }}</Option>
			</Select>
			<Select class="search-col" placeholder="请选择风控模型" v-model="riskModelNo" style="width:200px">
				<Option
					v-for="(item, index) in modelList"
					:value="item.rmNo"
					:key="index"
				>{{ item.name }}</Option>
			</Select>
			<Select v-model="investorId" style="width: 150px;" filterable>
				<Option
					v-for="(item, index) in investorList"
					:key="index"
					:value="item.investorId">{{ item.investorName }}</Option>
			</Select>
				<!--
					TODO
					后台接口404 
				-->
		    <!-- <Select v-model="managerId" style="width:200px">
		        <Option v-for="item in managerList" :value="item.id" :key="item.id">{{item.name}}</Option>
		    </Select> -->
			<div class="list">
				<table class="table table-hover table-condensed" border>
				<thead>
					<tr>
						<td>拦截原因</td>
						<td>拦截人数</td>
						<td>拦截占比</td>
					</tr>
				</thead>
				<tr v-for="item in tableList"> 
					<td>{{item.failReason}}</td>
					<td>
						<Poptip v-if="item.modelDistributions" trigger="hover" placement="left" width="310">
							<span :style="{'text-decoration': item.modelDistributions ? 'underline' : ''}">{{item.failCount}}</span>
							<div slot="content">
								<table class="table table-hover table-condensed" border>
									<thead>
										<tr>
											<td>风控模型编号</td>
											<td>拦截占比</td>
											<td>拦截人数</td>
										</tr>
									</thead>
									<tbody>
										<tr v-for="items in item.modelDistributions">
											<td>{{items.riskModelNo}}</td>
											<td>{{items.failReasonRate}}</td>
											<td>{{items.failCount}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</Poptip>
						<span v-else >{{item.failCount}}</span>
					</td>
					<td>{{item.failReasonRate}}</td>
				</tr>
				</table>
			
			<!-- <div style="float: right;margin-top:20px;text-align: right;">
				<span class="kkpager_totalSize">共有{{loan_list_size}}条数据</span>
				<Page :total="loan_list_size" :page-size="20"  @on-change="pageChange" show-elevator style="margin: 15px 0;"></Page>
			</div> -->
			<!-- 商户列表 end -->
			</div>
		</div>
	</div>
</div>
<!-- 财务管理 end -->
</template>

<script>
	export default{
		data(){
			return{
				platformId: -1,
				tabIndex: 0,
				riskModelNo: -1,
				investorId: -1,
				tableList:[],
				channelList: [],
				modelList: [],
				beginDate:'',
				endDate:'',
				options: null,
				type:1,
				myState:-1,
				investorList: [],
				loan_list_size: 1,
				loan_list_page: 1,
				loading: true,
				disDate: {
					disabledDate (date) {
					return date && date.valueOf() > Date.now();
					}
				}
			}
		},
		created () {
			this.getAllInverstorList();
			this.getPlatformList();
		},
		methods:{
			getAllInverstorList () {
				this.$http.post('/helsinki/admin/investor/getAllInvestorList')
				.then(({ data: { data, errcode, info } }) => {
					if (errcode === 0) {
						this.investorList = data.list;
					}
				}, error => {
					console.log(error);
				});
			},
			banben(e){
				e == 0 ? this.tabIndex = 0 : this.tabIndex = 1;
			},
			getPlatformList () {
				this.$http.post('/helsinki/admin/daoliu/getAllPlatforms')
				.then(({ data: { errcode, info, data } }) => {
					if (errcode == 0) {
						this.channelList = data.list;
					}
				}, error => {
					console.log(error);
				}).then(this.$http.get('/helsinki/admin/risk-model')
        .then((data) => {
          if (data.body.errcode == 0) {
						this.modelList = data.body.data;
						this.modelList.unshift({rmNo: -1, name: '全部风控模型'});
          }
          this.utLoading = false;
        }, error => {
          // this.$Message.info(error);
        }))
			},
			getTableDate(st) {
				var _this = this;
				var myparam = {};
				if(st) myparam.riskModelNo = _this.riskModelNo;
				this.tabIndex == 0 ? myparam.riskModelType = 'preLoan' : myparam.riskModelType = 'inLoan';
				myparam.platformId = _this.platformId;
				myparam.beginDate = _this.beginDate;
				myparam.endDate = _this.endDate;
				myparam.investorId = _this.investorId;
				this.$http.post('/helsinki/admin/report/getFailReasonList',myparam)
				.then(({ data: { errcode, info, data } }) => {
					if (errcode == 0) {
						this.tableList = data.list;
					}
				}, error => {
					console.log(error);
				})
				
				// .then(function(res){
				// 	if (res.data.errcode == 0) {
				// 		_this.getFinanceDateList = res.data.data.collectionData;
				// 		if (!_this.options) {
				// 			_this.options = res.data.data.managerList;
				// 		}
						
				// 	}
				// },function(err){
				// 	console.log(err);
				// });
			},
			// getCollectionOptions(){//获取催收列表
			// 	var _this = this;
			// 	this.$http.post('/helsinki/admin/collection/getCollectionOptions',{}).then(function(res){
			// 	if (res.data.errcode == 0) {
			//     	_this.managerList = res.data.data.list;
					
			// 		//console.log(_this.loan_list_page);
			// 	}
			// 	},function(err){
			// 		console.log(err);
			// 	});
			// },
			timeChange(e){
				if(typeof(e)=="undefined"){
					this.beginDate = e[0];
				}else if(typeof(e)=="object"){
					this.beginDate = e[0];
					this.endDate = e[1];
				}
				this.riskModelNo != -1 ? this.getTableDate(true) : this.getTableDate();
			},
			pageChange(e){
				this.riskModelNo != -1 ? this.getTableDate(true) : this.getTableDate();
			}
		},
		mounted:function(){
			// TODO 后台接口404
			// this.getCollectionOptions();
			this.getTableDate();
		},
		watch:{
			platformId:function(){
				this.riskModelNo != -1 ? this.getTableDate(true) : this.getTableDate();
			},
			riskModelNo:function(){
				this.riskModelNo != -1 ? this.getTableDate(true) : this.getTableDate();
			},
			tabIndex:function(){
				this.riskModelNo != -1 ? this.getTableDate(true) : this.getTableDate();
			},
			investorId() {
				this.getTableDate();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.finance_header{
		text-align: center;
		margin-bottom: 15px;
		
	}
	.finance_header a{
		font-size: 17px;
		color: #337ab7 !important;
	}
	.list {
		margin-top: 20px;
	}
	
	.finance_header .headerDiv{
		border-right: 3px solid #009999;
		text-align: center;
    	/*padding-right: 70px;*/
	}
</style>